---
title: Limit rule groups
description: Methods to prevent new groups
hide_table_of_contents: true
---

import { BrowserWindow } from '@site/src/components/BrowserWindow';
import { QueryBuilderEmbed } from '@site/src/components/QueryBuilderEmbed';
import { ActionElement } from 'react-querybuilder';

Some implementations require a flat, rule-only structure, or need to restrict group creation to specific conditions (such as limiting depth to one level). Several approaches can address these requirements.

## Prevent creation of new groups

The simplest approach is hiding the "+ Group" button entirely. Set the `addGroupAction` component to `null` (or `() => null`) to prevent group creation:

```tsx
<QueryBuilder
  fields={fields}
  query={query}
  onQueryChange={setQuery}
  controlElements={{
    // highlight-start
    addGroupAction: null,
    // highlight-end
  }}
/>
```

Alternatively, hide the button using CSS with the default `ruleGroup-addGroup` class:

```css
.ruleGroup-addGroup {
  display: none;
}
```

Both approaches produce this result:

<BrowserWindow>
  <QueryBuilderEmbed controlElements={{ addGroupAction: null }} />
</BrowserWindow>

## Conditionally allow new groups

To allow groups only at the top level (hiding the button in sub-groups), conditionally render the `ActionElement` based on the `level` prop:

```tsx
<QueryBuilder
  fields={fields}
  query={query}
  onQueryChange={setQuery}
  controlElements={{
    // highlight-start
    addGroupAction: props => (props.level === 0 ? <ActionElement {...props} /> : null),
    // highlight-end
  }}
/>
```

The CSS equivalent uses descendant selectors:

```css
.ruleGroup .ruleGroup .ruleGroup-addGroup {
  display: none;
}
```

Both methods produce this result:

<BrowserWindow>
  <QueryBuilderEmbed
    defaultQuery={{
      combinator: 'and',
      rules: [
        { combinator: 'and', rules: [] },
        { combinator: 'and', rules: [] },
      ],
    }}
    controlElements={{
      addGroupAction: props => (props.level === 0 ? <ActionElement {...props} /> : null),
    }}
  />
</BrowserWindow>

## Other methods

You can also prevent group addition by returning `false` from the `onAddGroup` callback.

:::caution

This approach alone may confuse users since the "+ Group" button appears clickable but produces no result. Consider combining this method with user interface cues or messaging to clarify the behavior.

:::

```tsx
<QueryBuilder
  fields={fields}
  query={query}
  onQueryChange={setQuery}
  // highlight-start
  onAddGroup={() => false}
  // highlight-end
/>
```
